<template>
  <div >
     <XioaDog4  v-for="(obj,index) in arr" :key="index"
     :imgUrl="obj.dogImgUrl"
     :dogname="obj.dogName"
     :index="index"
  @like="add"
     />
     <p>您喜欢的狗如下:</p>
     <ul>
         <li v-for="item,index in arrs" :key="index">{{item}}</li>
     </ul>
  </div>
</template>

<script>
import XioaDog4 from "./components/XiaoDog4.vue"
export default {
    data(){
        return{
            arrs:[],
arr: [
        {
          dogImgUrl: "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl: "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl: "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl: "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "哈士奇",
        },
        {
          dogImgUrl: "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl: "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "萨摩耶",
        },
      ],
        }

    },
components:{
    XioaDog4
},
methods:{
    add(index){
this.arrs.push(this.arr[index].dogName)
    }
}
}
</script>

<style>

</style>